<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index" >
				<view :class="{'active':isActive === index}" @click="checked(index)">
				{{item.title}}<text style="color: red;">({{item.length}})</text>
				</view>
			</view>
		</view>
			<view class="nav_item" v-if="isActive==0">
				<view class="newBxBox">
					<view class="top">
						<text>未登记<text style="color: red;">({{oneLength}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in resR" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 65%;">
								<p style="font-size: 28rpx;padding-left: 20rpx;margin-top: 15rpx;">单号：{{item.YBQNUM}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">设备：{{item.YDVNUM+''+item.YDVNAM}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">部门：{{item.MANDEPT}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">计划保养日期：{{item.YJIHUA}}</p>
							</view>
							<view class="y" style="">
								<p @click="gotoPd(item.YBQNUM)" style="margin-left: 75rpx;font-size: 28rpx;color: red; margin-top: 50rpx;">登记 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==1">
				<view class="newBxBox">
					<view class="top">
						<text>已登记<text style="color: red;">({{oneLength2}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 65%;">
								<p style="font-size: 28rpx;padding-left: 20rpx;margin-top: 15rpx;">单号：{{item.YBQNUM}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">设备：{{item.YDVNUM+''+item.YDVNAM}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">部门：{{item.MANDEPT}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">计划保养日期：{{item.YJIHUA}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">实际保养日期：{{item.YSJDAT}}</p>
							</view>
							<!-- <navigator url="../bxdzPages/bxdzPages"> -->
							<view class="y">
								<p @click="gotoBc(item.YBQNUM)" style="margin-left: 75rpx;font-size: 28rpx;color: #13d5f6; margin-top: 80rpx;">详情 ></p>
							</view>
							<!-- </navigator> -->
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				resR:[],
				twoData:[],
				oneLength:0,
				oneLength2:0,
				navList:[
					{
						index: 0,
						title: '未登记',
						length: 0,
					},{
						index: 1,
						title: "已登记",
						length: 0,
					}
				],
				userInfo: {},
				dataList:[],
				num:'',
			}
		},
		onShow(query) {
			this.userInfo = uni.getStorageSync('userInfo') 
		},
		onLoad(query) {
			this.num = query.num;
		},
		created() {
		  this.checked(this.isActive);  // 根据当前标签的索引调用对应的接口
		},
		methods: {
			checked(index) {
				this.isActive = index
				let GRP1 = {
						GRP1: [{
							YUSERID:this.userInfo.ID
						}]
				}
				if(this.num!=undefined){
					GRP1.GRP1[0].YDVNUM=this.num
				}
				let GRP1Json = JSON.stringify(GRP1)
				// console.log(GRP1Json);
				uni.request({
				  url: 'http://125.64.76.148:8125/KXJDX3Api/x3api', // 替换为实际的接口URL
				  method: 'POST', 
				  data: {
					"username":"APIUSER",
					"passwd":"123",
					"publicName":"WSLISTXBQ",
					"method":"run",
					"test":uni.getStorageSync('test') ? "true" : "false",
					"inputXml":JSON.stringify(GRP1)
				  },
				  success: (res) => {
					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.data.message)
					this.dataList= resR1.GRP1
					
					if(this.dataList[0].YBQNUM==''){
						this.dataList.splice(0,1)
						this.oneLength-=1
					}
					
					this.resR=[]
					this.twoData=[]
					for (var i = 0; i < this.dataList.length; i++) {
						if(this.dataList[i].YBQNUM!=''){
							if(this.dataList[i].YYDJ==1){
								this.resR.push(this.dataList[i])
							}
							if(this.dataList[i].YYDJ==2){
								this.twoData.push(this.dataList[i])
							}
						}
					}
					this.oneLength = this.resR.length
					this.oneLength2 = this.twoData.length
					this.navList[0].length = this.oneLength
					this.navList[1].length = this.oneLength2
					console.log(this.resR,'this.resR');
					console.log(this.twoData,'this.twoData');
					if(this.num!=undefined && this.oneLength==1){
						this.num=undefined
						this.gotoPd(this.resR[0].YBQNUM)
					}
				  },
				  fail: (err) => {
					// 请求失败的处理逻辑
					console.error(err);
				  }
				});
				return
			},			
			gotoPd(a){
				uni.navigateTo({url:"/pages/djjmPages/djjmPages?num="+a})
				return
			},
			gotoBc(a){
				uni.navigateTo({url:"/pages/djjmPages/djjmPages?num="+a})
				return
			}
		}
	}
</script>

<style>
.tab_nav{
	background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #13d5f6;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 8rpx;
		background-color:  #13d5f6;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.newBxBox{
		margin-top: 25rpx;
		background-color: white;
	}
	.top{
		height: 50rpx;
		line-height: 50rpx;
		color: gray;
		padding-left: 20rpx;
	}
	.container{
		/* height: 250rpx; */
		border: 1px solid #ccc;
		display: flex;
		margin-bottom: 20rpx;
	}
	.container-left{
		width: 20%;
		border: 1px solid #ccc;
	}
	.container-right{
		width: 80%;
		display: flex;
	}
</style>
